import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import { createPortal } from 'react-dom'
import { useLowCodeStore } from '../store/lowcode'
import { Dropdown, Popconfirm, Space } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'

interface Props {
  // 组件id
  componentId: number
  // 容器class
  containerClassName: string
  // 相对容器class
  offsetContainerClassName: string
}

function SelectedMask({ componentId, containerClassName, offsetContainerClassName }: Props, ref: any) {
  const [position, setPosition] = useState({
    left: 0,
    top: 0,
    width: 0,
    height: 0
  })

  const { curComponentId, deleteComponent, setCurComponentId } = useLowCodeStore()

  // 对外暴露更新位置方法
  useImperativeHandle(ref, () => ({
    updatePosition
  }))

  useEffect(() => {
    updatePosition()
  }, [componentId])

  function updatePosition() {
    if (!componentId) return

    const container = document.querySelector(`.${offsetContainerClassName}`)
    if (!container) return

    const node = document.querySelector(`[data-component-id="${componentId}"]`)

    if (!node) return

    // 获取节点位置
    const { top, left, width, height } = node.getBoundingClientRect()
    // 获取容器位置
    const { top: containerTop, left: containerLeft } = container.getBoundingClientRect()

    // console.log(top - containerTop + container.scrollTop, left - containerLeft)

    // 计算位置
    setPosition({
      top: top - containerTop + container.scrollTop,
      left: left - containerLeft,
      width,
      height
    })
  }

  if (!document.querySelector(`.${containerClassName}`)) return <div></div>

  function deleteHandle() {
    deleteComponent(curComponentId)
    setCurComponentId(null)
  }

  return createPortal(
    <div
      style={{
        position: 'absolute',
        left: position.left,
        top: position.top,
        backgroundColor: 'rgba(66, 133, 244, 0.2)',
        border: '1px solid rgb(66, 133, 244)',
        pointerEvents: 'none',
        width: position.width,
        height: position.height,
        zIndex: 1003,
        borderRadius: 4,
        boxSizing: 'border-box'
      }}
    >
      {+(curComponentId || 0) !== 1 && (
        <div style={{ padding: '0 8px', backgroundColor: '#1890ff' }}>
          <Popconfirm
            title="确认删除？"
            overlayClassName="min-w-130px"
            okText={
              <div className="delete-confirm-btn" style={{ padding: '0 7px' }}>
                确认
              </div>
            }
            cancelText={
              <div className="delete-confirm-btn" style={{ padding: '0 7px' }}>
                取消
              </div>
            }
            onConfirm={deleteHandle}
            // getPopupContainer={n => n.parentNode}
            placement="bottomRight"
            okButtonProps={{ style: { padding: 0 } }}
            cancelButtonProps={{ style: { padding: 0 } }}
          >
            <DeleteOutlined style={{ color: '#fff' }} />
          </Popconfirm>
        </div>
      )}
    </div>,
    document.querySelector(`.${containerClassName}`)!
  )
}

export default forwardRef(SelectedMask)
